 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name width2">线下充值记录</div>
      </div>
      <div class="content-con">
        <Form class="bank-search" :model="form">
          <Row :gutter="16">
            <Col span="5">
              <FormItem prop="startTime">
                <Date-picker v-model="form.startTime" clearable size="large" type="datetime" placeholder="开始时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem prop="endTime">
                <Date-picker v-model="form.endTime" clearable size="large" type="datetime" placeholder="结束时间"></Date-picker>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem prop="uid">
                <i-input v-model="form.uid" size="large" clearable placeholder="商户ID"></i-input>
              </FormItem>
            </Col>
            <Col span="5">
              <FormItem prop="order_id">
                <i-input v-model="form.order_id" size="large" clearable placeholder="交易单号"></i-input>
              </FormItem>
            </Col>
            <Col span="4">
              <FormItem prop="status">
                <i-select v-model="form.status" size="large" style="color: #000;" placeholder="交易状态">
                    <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
                </i-select>
              </FormItem>
            </Col>
          </Row>
          <FormItem>
            <i-button style="margin-left: 10px;" size="large" class="btn-green" @click="search">搜索</i-button>
          </FormItem>
        </Form>
        <div class="capital-money">
          <div class="capital-money-item">
            订单数：<span class="list1">{{dataCount}}</span>
            充值总额：<span class="list1">¥ {{totalData.priceSum}}</span>
            成功入账总额：<span class="list2">¥ {{totalData.subMoneySum}}</span>
            成功手续费总额：<span class="list2">¥ {{totalData.poundageSum}}</span>
          </div>
        </div>
        <div class="bank-form">
          <div class="form-item">
            <i-table :columns="foodColumns" :data="foodData">
              <template slot-scope="{ row }" slot="actualEntry">
                {{ row.price | submoney(row.poundage) }}
              </template>
            </i-table> <!-- table组件 -->
          </div>
          <div class="page">
            <Page :id="pageId"
             :total="dataCount"
             :page-size="pageSize"
             style="float: left;"
             @on-change="changepage"
             @on-page-size-change="nowPageSize"
             show-total show-sizer show-elevator></Page> <!-- page组件 -->
            <!-- <Button style="float: left;margin-left: 10px;" type="primary" @click="goElevatorPage">确认</Button> -->
          </div>
        </div>
      </div>

  <audit-form
    :mData="mData"
    v-model="auditFormVisible"
    @submit="getList"
  />
   </Card>
 </template>
<script>
import auditForm from '@/components/modal/auditForm'
import { getRecharge } from '@/api/merchants'
export default {
  // name: 'offline_record',
  props: {
    shadow: {
      type: Boolean,
      default: false
    }
  },
  components: { auditForm },
  data () {
    return {
      mData: {},
      auditFormVisible: false,
      form: {
        startTime: '',
        endTime: '',
        uid: '',
        order_id: '',
        status: ''
      },
      value: '',
      pageId: 'targetpage',
      ajaxHistoryData: [],
      exportdata: [],
      // 初始化信息总条数
      dataCount: 0,
      // 每页显示多少条
      pageSize: 10,
      pageCurrent: 1, // 当前页
      foodColumns: [
        // {
        //   type: 'selection',
        //   width: 60,
        //   align: 'center',
        //   fixed: 'left'
        // },
        {
          title: '交易单号',
          key: 'order_id',
          width: 260,
          tooltip: true
        },
        {
          title: '商户ID',
          key: 'uid',
          width: 120
        },

        {
          title: '交易金额(元)',
          key: 'price',
          width: 120
        },
        {
          title: '手续费(元)',
          key: 'poundage',
          width: 100
        },
        {
          title: '实际入账(元)',
          width: 130,
          slot: 'actualEntry'
        },
        {
          title: '状态',
          width: 110,
          key: 'status',
          align: 'center',
          render: (h, params) => {
            let status = params.row.status
            let statusColor = ' '
            let statusText = ' '
            switch (status) {
              case 0:
                statusText = '处理中'
                statusColor = 'orange'
                break
              case 1:
                statusText = '充值成功'
                statusColor = 'green'
                break
              case 2:
                statusText = '充值失败'
                statusColor = 'gray'
                break
            }
            return h('span', {
              style: {
                color: statusColor
              }
            }, statusText
            )
          }
        },
        {
          title: '创建时间/处理时间',
          minWidth: 200,
          key: 'add_time',
          render: (h, params) => {
            return h('div', [h('div', params.row.add_time), h('div', params.row.p_time)])
          }
        },
        {
          title: '操作',
          key: 'action',
          width: 200,
          align: 'center',

          render: (h, params) => {
            return h('div', [
              h(
                'Button', {
                  props: {
                    size: 'small'
                  },
                  style: {
                    color: 'white',
                    padding: '0 5px',
                    marginRight: '10px',
                    height: '24px',
                    fontSize: '12px',
                    backgroundColor: '#009688'
                  },
                  on: {
                    click: () => {
                      this.openAuditForm(params.row)
                      // this.$router.push({
                      //   name: 'off_check',
                      //   params: {
                      //     row: params.row
                      //   }
                      // })
                    }
                  }
                },
                '查看/审核'
              )
            ])
          }
        }
      ],
      foodData: [],
      totalData: {},
      cityList: [
        {
          value: 0,
          label: '处理中'
        },
        {
          value: 1,
          label: '成功'
        },
        {
          value: 2,
          label: '失败'
        }
      ]
    }
  },
  methods: {
    openAuditForm (data) {
      this.mData = data
      this.auditFormVisible = true
    },
    getList () {
      this.form.pageSize = this.pageSize
      this.form.pageCurrent = this.pageCurrent

      getRecharge(this.form)
        .then(res => {
          this.foodData = res.data.data
          this.dataCount = res.data.count

          this.totalData = res.data.totalData
        }).catch(err => {
          this.$Message.error(err.msg)
        })
    },
    search () {
      this.getList()
    },

    // 点击切换页面
    changepage (index) {
      // 储存当前页
      this.pageCurrent = index
      this.getList()
    },
    // 每页显示的数据条数
    nowPageSize (index) {
      this.pageSize = index
      this.getList()
    },

    // 点击确认，跳转到输入的页码
    goElevatorPage () {
      var evtObj
      var thisPage = document.getElementById(this.pageId)
      // var thisPage=this.$refs.myPage;//也可以用ref来获取page这个dom
      var elevatorDiv = thisPage.getElementsByClassName('ivu-page-options-elevator')
      // 如果thisPage这里报错了,请核对上文的获取page的DOM的语句是否获取不到
      if (elevatorDiv && elevatorDiv.length > 0) {
        var pageInput = elevatorDiv[0].getElementsByTagName('input')[0]
        if (window.KeyEvent) { // firefox 浏览器下模拟事件
          evtObj = document.createEvent('KeyEvents')
          evtObj.initKeyEvent('keyup', true, true, window, true, false, false, false, 13, 0)
        } else { // chrome 浏览器下模拟事件
          evtObj = document.createEvent('UIEvents')
          evtObj.initUIEvent('keyup', true, true, window, 1)
          delete evtObj.keyCode
          if (typeof evtObj.keyCode === 'undefined') { // 为了模拟keycode
            Object.defineProperty(evtObj, 'keyCode', { value: 13 })
          } else {
            evtObj.key = String.fromCharCode(13)
          }
        }
        pageInput.dispatchEvent(evtObj)
      }
    }
  },
  created () {
    this.getList()
  }
}
</script>
 <style lang="less">
 </style>
